import React, {Component} from 'react';
import { StyleSheet, TextInput ,Text, View, ActivityIndicator,ScrollView } from 'react-native';
import { ListItem } from 'react-native-elements'
import Ionicons from 'react-native-vector-icons/Ionicons';
import Api from './Api';

export default class NovelSearch extends React.Component {
    static navigationOptions = {
      title: '搜索',
    };
  
    state = { data:[],loaded:true,selectedIndex:0,keyword:'辰东' }
    
    searchAction = () => {
        this.setState({loaded:false})
        Api.searchNovel({keyword:this.state.keyword})
            .then((res) => {
                this.setState({
                    data:res,
                    loaded:true
                })
            })
    }
    render() {
        let {keyword,loaded,data} = this.state
        return (
          <View style={{ flex: 1,padding:10,}}>
            <TextInput
                style={{height: 40,borderColor: '#EEE', borderWidth: 1,borderRadius:4,paddingLeft:5,}}
                placeholder="请输入书名或作者"
                value={keyword}
                onChangeText={(keyword) => this.setState({keyword})}
                onSubmitEditing = {this.searchAction}
                />
            {loaded ?
                <ScrollView>
                {
                    data.map((l, i) => (
                    <ListItem
                        key={i}
                        onPress={() => this.props.navigation.navigate('Detail',{
                            url:l.href,
                            title:l.title
                        })}
                        title={l.title}
                        bottomDivider={true}
                        rightIcon={
                            <Ionicons
                                name="ios-arrow-forward"
                                size={15}
                                color="#2089dc"
                                />
                        }
                    />
                    ))
                }
                </ScrollView>
                :
                <View style={styles.horizontal}>
                    <ActivityIndicator size="small" color="#00ff00" />
                    <Text>Loading...</Text>
                </View>
            }
          </View>
        );
    }
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      flexDirection: "row",
      justifyContent: "center",
      alignItems: "center",
      paddingLeft:5,
      paddingRight:5,
    },
    horizontal: {
      flex: 1,
      justifyContent: 'center',
      alignItems: "center",
      flexDirection: 'column',
      padding: 10
    },
    rightContainer: {
      flex: 1,
      alignItems:"flex-start",
      paddingLeft: 10,
    },
    title: {
      fontSize: 18,
      marginBottom: 8
    },
    year: {
      textAlign: "center"
    },
    thumbnail: {
      width: 53,
      height: 81
    },
    list: {
      paddingTop: 20
    }
  });